<script type="text/javascript">
    
    var loggedIn = false;
    
    function commandObject() {
        this.command = "command";
        this.arguments = new Array();
    }

    function test() { alert("Hello"); }

	var timerObj = new timer("update_table()", 1000);

	function start_timer(){
		timerObj.start();
	}
	
	function stop_timer(){
		timerObj.stop();
	}

    function send_json() {
        var jsonstuff = new testObject();
        jsonstuff.command = "Some random random command";
        jsonstuff.arguments[0] = "argument0";
        jsonstuff.arguments[1] = "argument1";

        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }
        else {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        var jsonString = JSON.stringify(jsonstuff);
        xmlhttp.open("POST","", false);
        xmlhttp.send(jsonString)

    }


    function quit() {
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }
        else {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        var command = new commandObject();
        command.command = "quit";
        var jsonString = JSON.stringify(command);
        xmlhttp.open("POST", "", false);
        xmlhttp.send(jsonString);
    }

    function displayResult() {
        var x = document.getElementById("myTable").rows[0].cells[0];
        //alert(x.innerHTML);
        x.innerHTML = "Cell 9";
        //alert(document.getElementById("myTable").rows.length);
        //alert(document.getElementById('myTable')Array.name)
        var table3 = document.getElementById("table");
        if (table3 != null) {
            table3.rows[0].cells[0].innerHTML = "Cool";

        }



    }
    //function to get xml from server
    function getXML() {
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }
        else {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.open("POST", "", false);
        var command = new commandObject();
        command.command = "xml";
        xmlhttp.send(JSON.stringify(command));
        xmlDoc = xmlhttp.responseXML;
        return xmlDoc;
    }

    function check_status() {
        if (this.readyState == 4 /* complete */) {
            update_table();
        }
    }

    function modify_value() {
        var value = prompt("What value do you want to enter", this.cells[2].innerHTML);
        var sendData = new XMLHttpRequest();
        sendData.open("POST", "", true);
        var command = new commandObject();
        command.command = "modify";
        command.arguments[0] = this.cells[1].innerHTML;
        command.arguments[1] = value;
        sendData.onreadystatechange = check_status;
        sendData.send(JSON.stringify(command));

    }

    function timer(funcExec,time) {
        var on = false;
        var timer;
        var function_to_execute = funcExec;
        var _time = time;

        this.start =  function() {
            on = true;
            timer = self.setInterval(this.handle_timeout, _time);
        }
        this.handle_timeout = function() {
            if (on) {
                //window[function_to_execute]();
                //test();
                eval(function_to_execute)
                
                
            } 
        }
        this.stop = function() {
            on = false;
            clearInterval(timer);
            delete this.timer;

        }
    }
	
	
	function check_login(){
		
		 if(document.cookie.split("=")[1]=="sam"){
    		loggedIn = true;
    		return true;
    	}
		
		
		
		if(!loggedIn){

			document.getElementById("loginScreen").style.display = "inline";
			return false;
			
		}
		
		return true;
		
	}


    //read the data from server and write the table
    function create_table() {
        
        //lets check if we are logged in
        if(! check_login() ){
        	return false;
        }
        
        
        
        
        // get the reference for the body
        //var body = document.getElementsByTagName("body")[0];
		var body =  document.getElementById("table_loc");
        body.style.borderWidth = "1px";
        // creates a <table> element and a <tbody> element
        var tbl = document.createElement("table");
        tbl.id = "table";

        var tblBody = document.createElement("tbody");
		
        // creating all cells
        var xmlDoc = getXML();
        var x = xmlDoc.getElementsByTagName("Registers");

        for (var i = 0; i < x.length; i++) {
            // creates a table row
            var row = document.createElement("tr");

            // Create a <td> element and a text node, make the text
            // node the contents of the <td>, and put the <td> at
            // the end of the table row
            var name = document.createElement("td");
            name.style.width = "80%";
            var nameText = document.createTextNode(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
            name.appendChild(nameText);
            row.appendChild(name);

            var number = document.createElement("td");
            number.style.width = "10%";
            var numberText = document.createTextNode(x[i].getElementsByTagName("number")[0].childNodes[0].nodeValue);
            number.appendChild(numberText);
            row.appendChild(number);
            
            var value = document.createElement("td");
            value.style.width = "10%";
            var valueText = document.createTextNode(x[i].getElementsByTagName("value")[0].childNodes[0].nodeValue);
            value.appendChild(valueText);
            row.appendChild(value);

            row.addEventListener("dblclick", modify_value, false);

            // add the row to the end of the table body
            tblBody.appendChild(row);
        }

        // put the <tbody> in the <table>
        tbl.appendChild(tblBody);
        // appends <table> into <body>
        body.appendChild(tbl);
        // sets the border attribute of tbl to 2;
        tbl.setAttribute("border", "0");
        //tbl.style.position = "absolute";
        //tbl.style.top = "15%";

    }

    function update_table() {
        var table = document.getElementById("table");

        var xmlDoc = getXML();
        var x = xmlDoc.getElementsByTagName("Registers");

        for (var i = 0; i < table.rows.length; i++) {
            table.rows[i].cells[0].innerHTML = x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
            table.rows[i].cells[1].innerHTML = x[i].getElementsByTagName("number")[0].childNodes[0].nodeValue;
            table.rows[i].cells[2].innerHTML = x[i].getElementsByTagName("value")[0].childNodes[0].nodeValue;
        }
    }

    function findDim() {
        alert(document.getElementById("button1").clientHeight);
        alert(document.getElementById("button1").clientWidth);
    }
    
    
    
    function send_login(){
    	

    	
    	
    	var user = document.getElementById("username");
    	var pass = document.getElementById("password");
    	
    	var login  = new commandObject();
    	login.command = "login";
    	login.arguments[0] = user.value;
    	login.arguments[1] = pass.value;
    	
    	
    	
    	JSON.stringify(login);
    	var conn = XMLHttpRequest();
    	
    	conn.open("POST", "", true);
    	conn.send(JSON.stringify(login));
    	
    	document.getElementById("loginScreen").style.display = "none";
    	
    	if(document.cookie.split("=")[1]=="sam"){
    		loggedIn = true;
    		return true;
    		
    	} else {
    		return false;
    	}
    	
    	
    }
</script>

<style type="text/css">
	
	#loginScreen{
		width: 100%;
		height: 100%;
		z-index: 100;
		display: none;
		position: absolute;
	}
	
	
	
	#table_loc {
		position: absolute;
		top: 15%;
		width: 60%;
		left: 20%;
		
		border:0px black solid;
	}
	#blackHead 
	{
	    width:100%;
	    background-color:White;
	}
	#table
	{
		position:relative;
	    width: 100%;
	    left: 0%;
	    top:0%;
	    
	}

	
	
	#header
	{
	    position: fixed;
	    top:3%;
	    left:30%;
	    width:40%;
	   	
	    
	}
	.inv 
	{
	    visibility:hidden;
	    width:30px;
	}
	.headerButton
	{
	    text-decoration:none;
	    position:relative;
	    font-family:Arial;
	    font-weight:bold;
	    color:White;
	    border: solid 1px  black;
	    background-color: Black;
	    border-radius: 5px;
	    padding: 5px;
	    
	}
	.headerButton:hover
	{
	    background-color: White;
	    color: Black;
	}
	#myTable {
		position: absolute;
		top:10%;
	}
		
	#button1
	{
		position: absolute;
		top:0%;
		left:0%;
		
	}	
	#button2
	{
		position: absolute;
		top:0%;
		right:0%;
	}
	
	#button3
	{
		position: absolute;
		top:0%;
		left:50%;
	}
	#button4
	{
		position: absolute;
		top:10%;
		left:50%;
	}
	#button5
	{
		position: absolute;
		top:10%;
		right:0%;
	}
</style>




<html>

<head>
<title>Table</title>	
	
</head>

<body>
<div id="table_loc" ></div>
<div id="header" class="headerBar">
    <a href=# id="create_table" class="headerButton" onclick="create_table()">Create Table</a>
    <span class="inv">" "</span>
    <a href=# id="update_table" class="headerButton" onclick="update_table()">Update Table</a>
    <span class="inv">" "</span>
    <a href=# id="quit" class="headerButton" onclick="quit()">Quit</a>
    <span class="inv">" "</span>
    <a href=# id="Send_Json" class="headerButton" onclick="send_json()">Send Json</a>
    <span class="inv">" "</span>
    <a href=# id="A1" class="headerButton" onclick="start_timer()">Start Timer</a>
	<span class="inv">" "</span>
    <a href=# id="A2" class="headerButton" onclick="stop_timer()">Stop Timer</a>
</div>
<div  id="loginScreen" >

        <p>Username:
          <input type="text" size="15" name="username" id="username" />

          <br />
          Password:
          <input type="password" size="15" name="password" id="password" />

          <br />
          <input type="button" accesskey="l" id="login_btn" name="login" value="Login" onclick="send_login()"/>

        </p>
 </div>



</body>


</html>

